<template>
  <div class="my">
    <!-- 登录退出显示 -->
    <div class="my1">
      <div class="my2">
        <!-- 放在登录里面，登录成功才显示退出登录 -->
        <span type="primary" size="small" v-if="islogin">欢迎回来:{{ uname }}</span>
        <span v-else @click="goLogin">登录/注册</span>
        <span @click="tuichu" v-if="this.islogin">退出登录</span>
      </div>
      <!-- 顶部用户订单信息栏 -->
      <div class="my3">
        <ul>
          <li>
            <van-icon name="coupon-o" color="#20242a"/>
            <span>我的订单</span>
          </li>
          <li>
            <van-icon name="send-gift-o" color="#20242a"/>
            <span>待付款</span>
          </li>
          <li>
            <van-icon name="logistics" color="#20242a"/>
            <span>待收货</span>
          </li>
          <li>
            <van-icon name="chat-o" color="#20242a"/>
            <span>待评价</span>
          </li>
        </ul>
      </div>
    </div>
  

    <Tabbar />
  </div>
</template>

<script>
import { mapState } from "vuex";
import Tabbar from "../components/common/Tabbar.vue";
export default {
  computed: {
    ...mapState(["uname", "islogin"]),
  },
  // name: 'My',
  components: { Tabbar },
  methods: {
    goLogin() {
      this.$router.push("/login");
    },
    tuichu() {
      this.$messagebox("退出登录").then(() => {
        this.$store.commit("setIslogin", false);
        sessionStorage.clear();
        // sessionStorage.removeItem()
        this.$router.push("/my");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.my {
  user-select: none;
  // border: 1px solid red;
  .my1{
    background-image: linear-gradient(
      to right,
      #ffe4e4,
      #daf5ff,
      rgb(222, 219, 255)
    );
    height: 100%;
    // border: 1px solid rgb(226, 65, 29);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .my2{
      display: flex;
      flex-direction: column;
      // border: 1px solid rgb(47, 49, 165);
      // 控制登录退出整体的高度
      margin-bottom: 6vh;
      height: 100%;
    }
    .my2>span {
      border: 1px solid #b5a1ff;
      box-shadow: 1px 1px 1px 1px #c3b4fc;
      opacity: 0.8;
      box-sizing: border-box;
      border-radius: 2vh;
      padding: 1.5vh;
      margin: 0 auto;
      margin-top: 7vw;
      margin-bottom: -2vh;
    }
    .my3{
      border-top: 1px solid rgb(250, 255, 242);
      height: 100%;
      
    }
    .my3 > ul:first-child{
      display: flex;
      justify-content: space-around;
      margin:1vh 0 1vh 0;
      li {
        // border: 1px solid #2ce479;
        display: flex;
        flex-direction: column;
        
        // border: 1px solid rgb(139, 194, 196);
        padding: 15px 10px 15px 10px;
        .van-icon {
          margin: 0 auto;
        }
      }
    }
  }
}
</style>
